@import './utils/func';
@import './utils/var';

.home-{
  &slider.swiper-container {
    height: 100%;
    .slider-item {
      @extend %bgfull;
    }
    .slider-prev,
    .slider-next {
      position: absolute;
      top: 50%;
      z-index: 5;
      width: 90px;
      height: 240px;
      margin-top: -120px;
      @extend %bgfull;
      cursor: pointer;
    }
    .slider-prev {
      left: 5%;
      background-image: url("/@@/images/arrow_left.png");
    }
    .slider-next {
      right: 5%;
      background-image: url("/@@/images/arrow_right.png");
    }
    .slider-page{
      box-sizing: border-box;
      position: absolute; z-index: 5; bottom: 8%;
      padding-right: 5%;
      text-align: right;
      .swiper-pagination-bullet{
        width: 70px; height: 4px;
        margin: 0 10px;
        font-size: 0; line-height: 0;
        background: white;
        border-radius: 0;
        opacity: .69;
        &.swiper-pagination-bullet-active{
          background-color: $color-brown;
        }
      }
    }
  }
  &logo{
    position: absolute; right: 10%; top: 50px;
    text-align: center;
    .text{
      margin: 32px 0 0 12px;
    }
  }
  &nav {
    position: absolute; left: 0; bottom: 80px;
    width: 100%;
    li {
      padding: 20px 0 0 24%;
      font-size: 18px;
      a{
        display: inline-block;
        transition: all .3s;

        &:hover{
          transform: translateX(8px);
        }
        &.active,&.focus {
          color: $color-brown;
        }
      }
    }
  }
  &mao{
    position: absolute; left: 24%; bottom: 400px;
    .item{
      margin-top: 24px;
      img{
        width: 28px; height: 40px;
        opacity: .89;
      }
    }
  }
}
